import { BrowserModule } from '@angular/platform-browser'
import { NgModule, ModuleWithProviders, APP_INITIALIZER } from '@angular/core'
import * as $ from 'jquery'
import { CoreModule } from '@app/core/core.module'
import { SharedModule } from '@shared/shared.module'
import { APP_BASE_HREF } from '@angular/common'
import { environment } from '../environments/environment'

import { AppRoutingModule } from './app-routing.module'
import { AppComponent } from './app.component'
import config from '../assets/config.json'

import { DashboardComponent } from './pages/dashboard/dashboard.component'
import { DesignComponent } from './pages/design/design.component'
import { Store } from '@ngxs/store'
import { UpdateMenuAction } from '@app/store/action/layout.action'

import { GridsterModule } from 'angular-gridster2'
import { NgxEchartsModule } from 'ngx-echarts'
import { FullCalendarModule } from '@fullcalendar/angular' // for FullCalendar!

import { TaskComponent } from './components/task/task.component'
import { InvestTypeComponent } from './components/invest-type/invest-type.component'
import { RiskMoneyComponent } from './components/risk-money/risk-money.component'
import { AssetProportionComponent } from './components/asset-proportion/asset-proportion.component'
import { RiskEvaluationRateComponent } from './components/risk-evaluation-rate/risk-evaluation-rate.component'
import { CalendarComponent } from './components/calendar/calendar.component'
import { ProfitTypeComponent } from './components/profit-type/profit-type.component'
// import { PublicAssetComponent } from './pages/public-asset/public-asset.component'
import { TaskSubmitComponent } from './components/task-submit/task-submit.component'

import { LeverageRatioComponent } from './components/leverage-ratio/leverage-ratio.component'
import { IndustryConcentrateComponent } from './components/industry-concentrate/industry-concentrate.component'
import { ReserveMoneyComponent } from './components/reserve-money/reserve-money.component'
import { CompaignComponent } from './components/compaign/compaign.component'
import { CampaignActivityComponent } from './components/campaign-activity/campaign-activity.component'
import { CampaignCustomerComponent } from './components/campaign-customer/campaign-customer.component'
import { CustomerCountComponent } from './components/customer-count/customer-count.component'
import { CustomerAumComponent } from './components/customer-aum/customer-aum.component'

// 页面列表
const PAGES = [DashboardComponent, DesignComponent]
// 组件列表
const COMPONENTS = [
  AssetProportionComponent,
  RiskMoneyComponent,
  RiskEvaluationRateComponent,
  LeverageRatioComponent,
  IndustryConcentrateComponent,
  ReserveMoneyComponent,
  InvestTypeComponent,
  ProfitTypeComponent,
  CalendarComponent,
  // PublicAssetComponent,
  TaskComponent,
  TaskSubmitComponent,
  CompaignComponent,
  CampaignActivityComponent,
  CampaignCustomerComponent,
  CustomerCountComponent,
  CustomerAumComponent
]

const dashboardStartUp = (store: Store) => async () => {
  // 注册菜单
  store.dispatch(new UpdateMenuAction(config))
}

const providers = [
  {
    provide: APP_INITIALIZER,
    useFactory: dashboardStartUp,
    deps: [Store],
    multi: true
  }
]

export class ConfigModule {}
@NgModule({
  declarations: [AppComponent, ...PAGES, ...COMPONENTS],
  entryComponents: [...COMPONENTS],
  imports: [SharedModule, CoreModule.forRoot(), AppRoutingModule, NgxEchartsModule, GridsterModule, FullCalendarModule],
  providers,
  bootstrap: [AppComponent],
  exports: []
})
export class AppModule {}

@NgModule({})
export class AppDashboardModule {
  public static forRoot(): ModuleWithProviders {
    return {
      ngModule: AppModule,
      providers
    }
  }

  public static getConfig() {
    return config
  }
}
